﻿
@model MvcApplication1.Models.BreezeSampleTodoItem

@using MvcApplication1.Extension

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Breeze Sample</title>
    <link rel="stylesheet" href="/Content/breezesample.css"/>
     <!--3rd party library scripts -->
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
    <script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
    <script src="/Scripts/q.js"></script>
    <script src="/Scripts/breeze.debug.js"></script>
    
    @*<script type="text/javascript" src="~/BreezeSampleShell/Mappingdata/?model=BreezeSampleTodoItem&BreezeController=BreezeSample"></script>*@
    <script type="text/javascript">
        var manager = new breeze.EntityManager('Breeze/BreezeSample');
        var vm = {
            earth: ko.observableArray(),
        };

        var query = new breeze.EntityQuery().from("Todos").expand("BreezeSampleChildItems");
        manager.executeQuery(query).then(function (data) {
            data.results.forEach(function (item) {
                vm.earth.push(item);
            });
        }).fail(function (e) {
            alert(e);
        });

        $(document).ready(function () {
            ko.applyBindings(vm);


        });
    </script>

</head>
<body>  
    <div>
        <section id="content" class="content-wrapper main-content">

            <p data-bind="visible: !earth">Fetching data ... </p>
            <ul data-bind="foreach: earth, visible: earth" style="display:none">
                <li>
                    Question: <input data-bind="value: Question" type="text" />   <br />   
                    
                    <ul data-bind="foreach: { data: BreezeSampleChildItems, as: 'item' }">
                        <li>
                            <div data-bind="with: item">
                                @Html.Partial("BreezeSampleChildItems", null, null)
                            </div>
                        </li>
                    </ul>     



                </li>
            </ul>

            @*<ul id="myul"  data-bind="foreach: items">
                <li>
                    Question: @Html.CustomBreezeEditor(m => m.Question)
                    <button data-bind="attr: { name: $index }" onclick="addChild(this.name)">Add child</button>
                    <a href="#" data-bind="click: $parent.removeItem">Remove parent</a>

                    <ul data-bind="foreach: { data: BreezeSampleChildItems, as: 'item' }">
                        <li >
                            <div data-bind="with: item">
                                <input data-bind="value: Host" type="text" />
                            </div>        
                        </li>
                    </ul>

                </li> 
            </ul>*@


                @*<ul data-bind="foreach: { data: BreezeSampleChildItems, as: 'item' }">
                <li>
                    <b>Answer(s):</b>
                    <input data-bind="value: item.Host" type="text" />
                    <button data-bind="attr: { name: $parentContext.$index }" onclick="addChild(this.name)">Add child</button>
                    <a href="#" data-bind="attr: { name: $parentContext.$index, id: $index }" onclick="removeChildItem(this.name, this.id)">Remove child</a>
                </li>
            </ul>*@


        @*<div>
             <button  data-bind="click: WantEdit">SaveAll</button>
       </div>*@
        
        </section>
        
    
    </div> 
   
    
</body>
</html>